<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
  </head>
  <body>
    <!-- 单页应用程序 SPA -->
    <!-- 路由 -->
    <!-- http服务器 nginx（Tengine） apache (linux & win)  IIS tomcat  -->
    <!-- 最基本的功能就 目录文件静态文件 路由 -->
    <!-- 动态网页  http服务器 => CGI程序（PHP）=> mysql数据库 => php拼接模板与数据-->
    <!-- 后端渲染 -->

    <!-- ajax+json 数据渲染放到前端客户端  前后端分离   -->
    <!-- 前端数据获取ajax  假设获取不同文章的数据 换成不同的url或者query参数 -->
    <!-- 路由也需要放到前端处理 -->

    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
        <router-link to="/">Go to Home</router-link> |
        <router-link to="/about">Go to About</router-link> |
        <router-link to="/456">Go to 456</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
    <script>
      const Home = { template: "<div>Home</div>" };
      const About = { template: "<div>About</div>" };
      const Test = { template: "<div>456</div>" };

      //   创建vue实例
      const app = Vue.createApp({});

      //   使用中间件（某一个功能插件）
      //    注入路由
      app.use(
        VueRouter.createRouter({
          // 路由模式使用  hash模式 #
          history: VueRouter.createWebHashHistory(),
          // 路由配置
          routes: [
            { path: "/", component: Home },
            { path: "/about", component: About },
            { path: "/456", component: Test },
          ],
        })
      );

      //   挂载到#app
      app.mount("#app");

      //   选项卡 路由 区别 路由有参数 刷新可以保持页面
    </script>
  </body>
</html>
